Interactive Charts with Google Charting APIs

Google Cloud Datalab provides functionality to easily use the Google Charting API to produce interactive, JavaScript and SVG-based charts from your data, whether your data was loaded from BigQuery, CSV files, or another source loaded into a vanilla Python list.

These charts can be produced through the %%chart command.

The Chart Command


In [1]:
%%chart --help


usage: %%chart [-h]
               {annotation,area,bars,bubbles,calendar,candlestick,columns,combo,gauge,geo,heatmap,histogram,line,map,org,paged_table,pie,sankey,scatter,stepped_area,table,timeline,treemap}
               ...

Generate an inline chart using Google Charts using the data in a Table, Query,
dataframe, or list. Numerous types of charts are supported. Options for the
charts can be specified in the cell body using YAML or JSON.

positional arguments:
  {annotation,area,bars,bubbles,calendar,candlestick,columns,combo,gauge,geo,heatmap,histogram,line,map,org,paged_table,pie,sankey,scatter,stepped_area,table,timeline,treemap}
                        commands
    annotation          Generate a annotation chart.
    area                Generate a area chart.
    bars                Generate a bars chart.
    bubbles             Generate a bubbles chart.
    calendar            Generate a calendar chart.
    candlestick         Generate a candlestick chart.
    columns             Generate a columns chart.
    combo               Generate a combo chart.
    gauge               Generate a gauge chart.
    geo                 Generate a geo chart.
    heatmap             Generate a heatmap chart.
    histogram           Generate a histogram chart.
    line                Generate a line chart.
    map                 Generate a map chart.
    org                 Generate a org chart.
    paged_table         Generate a paged_table chart.
    pie                 Generate a pie chart.
    sankey              Generate a sankey chart.
    scatter             Generate a scatter chart.
    stepped_area        Generate a stepped_area chart.
    table               Generate a table chart.
    timeline            Generate a timeline chart.
    treemap             Generate a treemap chart.

optional arguments:
  -h, --help            show this help message and exit
None

As you can see, a variety of chart types are supported.


In [2]:
%%chart line --help


usage: %%chart line [-h] [-f FIELDS] -d DATA

Generate a line chart.

optional arguments:
  -h, --help            show this help message and exit
  -f FIELDS, --fields FIELDS
                        The field(s) to include in the chart
  -d DATA, --data DATA  The name of the variable referencing the Table or
                        Query to chart
None

The data to be charted is passed in as an argument.

Columns in data must be in a specific order according to the chart type. The --field argument, which takes a comma-separated list of field names, allows specifying the ordered set of columns to chart.

The body of the cell can include additional chart-specific options to pass to the chart.

Line Chart


In [3]:
%%bq query --name timeseries
SELECT timestamp, AVG(latency) AS latency FROM (
  SELECT TIMESTAMP_TRUNC(timestamp, HOUR) AS timestamp, latency
  FROM `cloud-datalab-samples.httplogs.logs_20140615`
  WHERE endpoint = 'Popular'
)
GROUP BY timestamp
ORDER BY timestamp

In [4]:
%bq execute -q timeseries


Out[4]:
timestamplatency
2014-06-15 07:00:00306.515555556
2014-06-15 08:00:00303.367768595
2014-06-15 09:00:00326.505050505
2014-06-15 10:00:00322.016574586
2014-06-15 11:00:00322.518918919
2014-06-15 12:00:00333.432835821
2014-06-15 13:00:00289.668122271
2014-06-15 14:00:00280.78700361
2014-06-15 15:00:00305.483552632
2014-06-15 16:00:00248.8828125
2014-06-15 17:00:00291.448863636
2014-06-15 18:00:00258.937823834
2014-06-15 19:00:00255.977272727
2014-06-15 20:00:00266.791540785
2014-06-15 21:00:00260.422155689
2014-06-15 22:00:00250.885057471
2014-06-15 23:00:00261.977591036
2014-06-16 00:00:00247.300813008
2014-06-16 01:00:00229.370473538
2014-06-16 02:00:00255.703804348
2014-06-16 03:00:00266.515625
2014-06-16 04:00:00264.44742268
2014-06-16 05:00:00289.041237113
2014-06-16 06:00:00281.367541766

(rows: 24, time: 1.7s, 15MB processed, job: job_3h4tFyCUWtOVNyFDpX80mfVXiJk)

In [5]:
%%chart line --fields timestamp,latency --data timeseries


Out[5]:

Bar charts and column charts are similar to line charts.

Scatter Chart


In [6]:
%%bq query -n births
SELECT gestation_weeks AS weeks, weight_pounds AS weight
FROM `publicdata.samples.natality`
WHERE gestation_weeks < 99
LIMIT 1000

In [7]:
%%chart scatter --data births
title: Birth Weight vs Weeks
height: 400
width: 900
hAxis:
  title: Weeks
vAxis:
  title: Weight
legend: none


Out[7]:

Pie Chart


In [8]:
%%bq query -n languages
SELECT repository_language AS language, COUNT(repository_language) as activity
FROM `publicdata.samples.github_timeline`
WHERE type = 'PushEvent'
  AND repository_language != ''
GROUP BY language
ORDER BY activity DESC
LIMIT 10

In [9]:
%%chart pie --fields language,activity --data languages
title: Top 10 OSS Programming Languages
height: 400
width: 800
pieStartAngle: 20
slices:
  0:
    offset: .2


Out[9]:

TimeSeries Chart


In [10]:
%%bq query -n weather
SELECT max_temperature AS temperature,
       SAFE_CAST(CONCAT(SAFE_CAST(year AS STRING), '-', SAFE_CAST(month AS STRING), '-', SAFE_CAST(day AS STRING)) AS TIMESTAMP) AS timestamp
FROM `publicdata.samples.gsod`
WHERE station_number = 727930 AND year >= 2000
ORDER BY year DESC, month DESC, day DESC

In [11]:
%%chart annotation --fields timestamp,temperature --data weather


Out[11]: